<template>
  <div class="todo-list-wrap">
    <ul class="todo-list">
      <li v-if="getAll.length == 0" class="list-none">暂无数据，请先添加</li>
      <template v-else>
        <li class="todo-item" v-for="item in getAll" :key="item.id">
          <span
            class="todo-state"
            :class="{ done: item.state }"
            @click="changeState(item.id)"
          ></span>
          <div class="todo">
            <p v-if="curId != item.id" @dblclick="editTodo(item)">
              {{ item.text }}
            </p>
            <MyInput
              v-else
              v-model="editText"
              @blur="editDone"
              @keydown.enter="editDone"
              @keydown.esc="cancelEdit"
            />
          </div>
          <div class="todo-del">
            <a
              href=""
              class="iconfont icon-close"
              @click.prevent="delTodo(item.id)"
            ></a>
          </div>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import MyInput from "../components/MyInput.vue";
export default {
  name: "TodoList",
  data() {
    return {
      curId: "",
      beforeText: "",
      editText: "",
    };
  },
  components: {
    MyInput,
  },
  computed: {
    ...mapGetters({
      getAll: "todoStore/getAllList",
    }),
  },
  methods: {
    ...mapMutations([
      "todoStore/delTodo",
      "todoStore/changeState",
      "todoStore/editTodo",
    ]),
    delTodo(id) {
      console.log(id);
      this["todoStore/delTodo"](id);
    },
    changeState(id) {
      this["todoStore/changeState"](id);
    },
    editTodo(item) {
      this.curId = item.id;
      this.editText = item.text;
      console.log(item);
    },
    editDone() {
      console.log("确认");
      this["todoStore/editTodo"]({
        id: this.curId,
        text: this.editText,
      });

      this.curId = "";
      this.editText = "";
    },
    cancelEdit() {
      console.log("取消");
      this.curId = "";
      this.editText = "";
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/var";

.list-none {
  text-align: center;
  color: #999;
  font-style: italic;
  font-size: 12px;
}
.todo-item {
  height: 40px;

  .todo-state {
    float: left;
    width: 14px;
    height: 14px;
    background: #bbb;
    margin-top: 13px;
  }
  .done {
    background: $theme-color;
  }

  .todo {
    width: 300px;
    float: left;
    height: 40px;
    line-height: 40px;
    margin-left: 6px;
  }

  .todo-del {
    float: right;
    height: 40px;
    line-height: 40px;

    a {
      padding: 0 5px;
      color: $btn-lgg2;
    }
  }
}
</style>